<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<script src="layui/layui.js"></script>
	</head>

	<body>

		<form class="layui-form">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="stu_name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
				</div>

				<label class="layui-form-label">班级</label>
				<div class="layui-input-inline">
					<select id="classid" name="class_id" lay-filter="aihao">
						<option value="">--请选择--</option>
					</select>
				</div>

				<label class="layui-form-label">生日</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input id="test1" type="text" name="begin" placeholder="" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline" style="width: 100px;">
					<input id="test2" type="text" name="end" placeholder="" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
				</div>
			</div>
			<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>
		<script>
			layui.use(['form', 'table', 'jquery', 'laydate'], function() {
				var form = layui.form;
				var table = layui.table;
				var $ = layui.jquery;
				var laydate = layui.laydate;
				//执行一个laydate实例
				laydate.render({
					elem: '#test1'
				});
				laydate.render({
					elem: '#test2'
				});

				//加载班级信息
				$.get(
					"clazz/findAll",
					function(res) {
						$(res).each(function() {
							var select = $("#classid");
							var option = "<option value='" + this.class_id + "'>" + this.classname + "</option>"
							select.append(option);
						})
						form.render(); //更新渲染全部
					}, 'json'
				);

				form.on('submit(*)', function(data) {
					//console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
					//console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
					//console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
					table.reload('demo', {
						where: data.field //设定异步数据接口的额外参数
						//,height: 300
					});
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
			});
		</script>

		<table id="demo" lay-filter="test"></table>

		<script>
			layui.use(['table', 'jquery', 'form'], function() {
				var table = layui.table;
				var $ = layui.jquery;
				var form = layui.form;

				//第一个实例
				  table.render({
				    elem: '#demo'
				    ,height: 512
				    ,url: 'students/findAll/' //数据接口
				    ,page: true //开启分页
				    ,toolbar: '#toolbarDemo'
				    ,cols: [[ //表头
				      {field: 'stu_id', title: 'ID'}
				      ,{field: 'stu_name', title: '用户名'}
				      ,{field: 'sex', title: '性别'}
				      ,{field: 'mtel', title: '手机号'} 
				      ,{field: 'qq', title: 'qq'}
				      ,{field: 'address', title: '地址'}
				      ,{field: 'birthday', title: '生日'}
				      ,{field: 'stu_status', title: '入学方式'}
				      ,{field: '', title: '班级',templet:function(d){return d.class_Id.classname}}
				      ,{fixed: 'right', title: '操作', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
				    ]]
				  });

				//触发事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch(obj.event) {
						case 'add':
							layer.open({
								type: 1,
								area: ['400px', '550px'],
								content: $('#addForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
							});
							break;

					};
				});

				//工具条事件
				table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

					if(layEvent === 'detail') { //查看
						//do somehing
					} else if(layEvent === 'del') { //删除
						layer.confirm('真的删除行么', function(index) {
							obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送删除指令
						});
					} else if(layEvent === 'edit') { //编辑
						//do something
						//回显
						console.log(data)
						form.val("editForm", data);
						layer.open({
							type: 1,
							area: ['400px', '550px'],
							content: $('#editForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
						});
						//同步更新缓存对应的值
						obj.update({
							username: '123',
							title: 'xxx'
						});
					} else if(layEvent === 'LAYTABLE_TIPS') {
						layer.alert('Hi，头部工具栏扩展的右侧图标。');
					}
				});
			});
		</script>

		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
			</div>
		</script>

	</body>

</html>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<form id="addForm" style="display: none" lay-filter="addForm" class="layui-form">
	<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
	<div class="layui-form-item">
		<label class="layui-form-label">姓名</label>
		<div class="layui-input-inline">
			<input type="text" name="stu_name" placeholder="请输入姓名" autocomplete="off" class="layui-input" lay-verify="required">
		</div>
	</div>

	

	<div class="layui-form-item">
		<label class="layui-form-label">性别</label>
		<div class="layui-input-block">
			<input type="radio" name="sex" value="男" title="男" checked>
			<input type="radio" name="sex" value="女" title="女">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">手机号</label>
		<div class="layui-input-inline">
			<input type="text" name="mtel" placeholder="请输入手机号" autocomplete="off" class="layui-input" lay-verify="phone">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">qq</label>
		<div class="layui-input-inline">
			<input type="text" name="qq" placeholder="请输入qq" autocomplete="off" class="layui-input" lay-verify="required">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">地址</label>
		<div class="layui-input-inline">
			<input type="text" name="address" placeholder="请输入地址" autocomplete="off" class="layui-input" lay-verify="required">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">生日</label>
		<div class="layui-input-inline" style="width: 100px;">
			<input id="test4" type="text" name="birthday" placeholder="yy-MM-dd" autocomplete="off" class="layui-input" lay-verify="date">
		</div>
	</div>

	
	<div class="layui-form-item">
		<label class="layui-form-label">入学方式</label>
		<div class="layui-input-inline">
			<select name="stu_status" lay-filter="aihao" lay-verify="required">
				<option value="">--请选择入学方式--</option>
				<option value="统招">统招</option>
				<option value="单招">单招</option>
			</select>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">班级</label>
		<div class="layui-input-inline">
			<select id="classid2" name="class_id" lay-filter="aihao" lay-verify="required">
				<option value="">--请选择--</option>
			</select>
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
	<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>

<script>
	layui.use(['form', 'table', 'jquery', 'laydate'], function() {
		var form = layui.form;
		var table = layui.table;
		var $ = layui.jquery;
		var laydate = layui.laydate;
		//执行一个laydate实例
		laydate.render({
			elem: '#test1'
		});
		laydate.render({
			elem: '#test2'
		});
		laydate.render({
			elem: '#test3'
		});
		laydate.render({
			elem: '#test4'
		});

		//加载班级信息
		$.get(
			"clazz/findAll",
			function(res) {
				$(res).each(function() {
					var select = $("#classid2");
					var option = "<option value='" + this.class_id + "'>" + this.classname + "</option>"
					select.append(option);
				})
				form.render(); //更新渲染全部
			}, 'json'
		);

		form.on('submit(add)', function(data) {
			//console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
			//console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
			//console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			$.post(
				"students/add",
				data.field,
				function(res) {
					//重载表格
					table.reload('test');
					window.location.reload();
				}
			);
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	});
</script>

<form id="editForm" style="display: none" lay-filter="editForm" class="layui-form">
	<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
	<input type="text" name="stu_id" class="layui-input" style="display: none" />
	<div class="layui-form-item">
		<label class="layui-form-label">姓名</label>
		<div class="layui-input-inline">
			<input type="text" name="stu_name" placeholder="请输入姓名" autocomplete="off" class="layui-input" lay-verify="required">
		</div>
	</div>

	

	<div class="layui-form-item">
		<label class="layui-form-label">性别</label>
		<div class="layui-input-inline">
			<input type="radio" name="sex" value="男" title="男" checked>
			<input type="radio" name="sex" value="女" title="女">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">手机号</label>
		<div class="layui-input-inline">
			<input type="text" name="mtel" placeholder="请输入手机号" autocomplete="off" class="layui-input" lay-verify="phone">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">qq</label>
		<div class="layui-input-inline">
			<input type="text" name="qq" placeholder="请输入qq" autocomplete="off" class="layui-input" lay-verify="required">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">地址</label>
		<div class="layui-input-inline">
			<input type="text" name="address" placeholder="请输入地址" autocomplete="off" class="layui-input" lay-verify="required">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">生日</label>
		<div class="layui-input-inline">
			<input id="test3" type="text" name="birthday" placeholder="请输入地址" autocomplete="off" class="layui-input" lay-verify="date">
		</div>
	</div>

	

	<div class="layui-form-item">
		<label class="layui-form-label">入学方式</label>
		<div class="layui-input-inline">
			<select name="stu_status" lay-filter="aihao" lay-verify="required">
				<option value="">--请选择入学方式--</option>
				<option value="统招">统招</option>
				<option value="单招">单招</option>
			</select>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">班级</label>
		<div class="layui-input-inline">
			<select id="classid1" name="class_id" lay-filter="aihao" lay-verify="required">
				<option value="">--请选择--</option>
			</select>
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
	<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>

<script>
	layui.use(['form', 'table', 'jquery', 'laydate'], function() {
		var form = layui.form;
		var table = layui.table;
		var $ = layui.jquery;
		var laydate = layui.laydate;
		//执行一个laydate实例
		laydate.render({
			elem: '#test1'
		});
		laydate.render({
			elem: '#test2'
		});
		laydate.render({
			elem: '#test3'
		});

		//加载班级信息
		$.get(
			"clazz/findAll",
			function(res) {
				$(res).each(function() {
					var select = $("#classid1");
					var option = "<option value='" + this.class_id + "'>" + this.classname + "</option>"
					select.append(option);
				})
				form.render(); //更新渲染全部
			}, 'json'
		);

		form.on('submit(edit)', function(data) {
			//console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
			//console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
			//console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			$.post(
				"students/edit",
				data.field,
				function(res) {
					//重载表格
					table.reload('test');
					window.location.reload();
				}
			);
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	});
</script>